{% extends '_admin.html' %}
{% import 'public.html' as public %}


{% block main_contain %}
<div class="row" id="CarParkSetting">
    <div class="col-lg-6">
        <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">停車場設置</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form id="ModifyForm">
              <div class="card-body">
                <div v-for="(val, key) in ModifyData" class="form-group row justify-content-center">
                    <label class="col-sm-3 col-form-label text-center">{[ ColumnName[key] ]}：</label>
                    <div class="col-sm-8">
                      <div v-if="key=='HourlyTimeout'" class="input-group mb-3">
                        <input v-model="ModifyData[key]" type="number" class="form-control" :name="key">
                        <div class="input-group-append">
                          <span class="input-group-text">分鐘</span>
                        </div>
                      </div>
                      <select v-else-if="key=='Model'" v-model="ModifyData[key]" class="form-control" :name="key">
                        {% for k, v in CarParkModels.items() %}
                        <option value="{{k}}">{{v}}</option>
                        {% endfor %}
                      </select>
                      <input v-else v-model="ModifyData[key]" class="form-control" type="text" :name="key">
                    </div>
                </div>
              </div>
              <!-- /.card-body -->
              <div class="card-footer text-center">
                <button type="submit" class="btn btn-success">保存設定</button>
              </div>
              <!-- /.card-footer -->
            </form>
          </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 系统参数
    var CarParkSetting = new Vue({
        el: '#CarParkSetting',
        delimiters: ['{[', ']}'],
        data: {
          ModifyData: {
            Name: '',
            Brand: '',
            Company: '',
            Address: '',
            Phone: '',
            Model: '',
            HourlyTimeout: 15,
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
        },
        methods:{
            // 刷新设置
            refresh_settings(){
              let setting = JSON.parse('{{ SettingFormData|safe }}')
              for(key in this.ModifyData){if(setting.hasOwnProperty(key)){this.ModifyData[key]=setting[key]}}
            },
            // 提交表单
            commit_settings(){
              axios.post("{{ url_for('carpark.setting') }}", {Modify: this.ModifyData})
              .then(response => {
                  if(response.status==200){
                      let ret = response.data
                      AppMessage.fire({icon: ret.icon, text: ret.text})
                      if(ret.icon=='success'){setTimeout("window.location.reload()", 2000)}
                  }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
              })
              .catch(function (error) {alert(error)})
            }
        },
        mounted: function(){
            // 校验
            $('#ModifyForm').validate({
              rules: {
                  Name: {required: true},
                  Brand: {required: true},
                  Company: {required: true},
              },
              errorElement: 'span',
              errorPlacement: function (error, element) {
                  error.addClass('invalid-feedback');
                  element.closest('.col-sm-8').append(error);
              },
              highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
              unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
              submitHandler: function (){CarParkSetting.commit_settings()},
            });
        }
    });
    // 更新
    CarParkSetting.refresh_settings()
</script>
{% endblock %}


